<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'我的订阅'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 全部委托 -->
    <view class="entrustAll">
      <text class="entAllTitle">全部专利集</text>
      <!-- <view class="newEnt" @click="toEditDataList"><view class="iconfont icon--jia"></view>新建专利集</view> -->
    </view>
    <!-- 展示列表 -->
    <view class="serchItem" v-for="(item, index) in dataList" :key="index">
      <image
        class="serchItemImg"
        :src="item.img"
        mode="scaleToFill"
      />
      <view @click="toAddMyDataList(item.groupId)">
        <view class="patentTitle1">{{ item.name }}</view>
        <view class="patentClassify">{{ item.orderNum }}条</view>
      </view>
      <view class="iconfont icon-a-13Bshenglve" @click="open(item.ID)"></view>
    </view>
  </view>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="bottom" :mask-click="true">
    <view class="dataList">
      <view class="addItemTitle">专利集名称</view>
      <view class="fenxiang">
        <text class="iconfont icon-dingyue"></text>
        <view @click="addDataList">取消订阅</view>
      </view>
      <!-- <view class="fenxiang">
        <text class="iconfont icon-zhuanfa"></text>
        <view @click="addDataList">分享</view>
      </view> -->
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="取消成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs, ref } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  userInfo: {},
  dataList: [],
  page: 1,
  id: "",
  img: ""
});
let success = ref();

let { dataList, img } = toRefs(data);
onShow(() => {
  data.dataList = [];
  data.page = 1
  data.img = $imgSrc
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      data.userInfo = res.data;
      updataList();
    },
  });
});
onPullDownRefresh(() => {
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
const updataList = () => {
  uni.request({
    // url: $url + `/zlOrder/getZlOrderList?page=${data.page}&pageSize=10`,
    url: $url + `/zlOrder/getZlOrderList?page=${data.page}&pageSize=10`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.list?.map((item) => {
        if (item.img.indexOf("htt")) {
          item.img = $imgSrc + item.img;
          data.dataList.push(item);
        } else {
          data.dataList.push(item);
        }
      });
    },
  });
};
let popup = ref();
// let alertDialog = ref();
const open = (id) => {
  data.id = id * 1;
  popup.value.open("button-text");
};
const addDataList = () => {
  uni.request({
    url: $url + `/zlOrder/deleteZlOrder`,
    method: "DELETE",
    timeout: 6000,
    data: { id: data.id },
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open()
      console.log(res);
      data.dataList = [];
      data.page = 1;
      updataList()
    },
  });

  popup.value.close();
};
const toAddMyDataList = (id) => {
  uni.navigateTo({ url: `/pages/creamDetails/index?id=${id}&isAdd=1` });
};
</script>

<style scoped>
.index {
  padding-bottom: 55rpx;
}
.entrustAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  margin-bottom: 32rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #666;
}
.entAllTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.entrustAll .iconfont {
  border-radius: 50%;
  border: #666 1rpx solid;
  margin-right: 15rpx;
  font-size: 20rpx;
  padding: 8rpx;
}
.newEnt {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 27rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 11rpx;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 475rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.dataList {
  padding-bottom: 1rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  margin-bottom: 24rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.fenxiang {
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
.partake {
  margin-right: 5rpx;
  width: 92rpx;
  height: 27rpx;
  background: #1677ff;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}

.dataList3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle3 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 0 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.affirm3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm3 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid3 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
</style>
